<template>
  <div class="div">
    <div class="d">
      <span style=" position: absolute;left: 50px;top: 30px;">套餐管理</span>
      <div class="mihu">
        <el-input size="40px" placeholder="套餐名称搜索" v-model="searchInput" style="width: 370px;" @change="selevall">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
      </div>
      <div class="divv">
        <el-button  size="small" style="background-color: #409EFF;color:white;width:100px;height:50px;"  @click="onhandAdd">新增套餐</el-button>
      </div>
     
      <div class="i">
        <el-table :data="tableData" stripe style="width: 100%; font-size: 15px" size="small">
          <el-table-column prop="combonum" label="套餐编号" width="150" align="center" font-family:PingFang SC>
          </el-table-column>
          <el-table-column prop="" label="套餐图片" align="center" width="150">
             <template slot-scope="scope">
                <div class="demo-basic--circle">
                    <img :src="scope.row.comboimg" alt="" style="width:50px;height:70px;">
                </div>
            </template>
            
          </el-table-column>
          <el-table-column prop="comboname" label="套餐名称" align="center" width="300"></el-table-column>
          <el-table-column prop="comboporct" label="价格(元)" align="center"  width="120"></el-table-column>
          <el-table-column prop="comboeffect" label="套餐内容" align="center" width="80"></el-table-column>
          <el-table-column label="操作" align="center" width="300">
            <template slot-scope="scope">
              <el-button @click="handleEdit(scope.$index, scope.row)" style="background-color: #FF6633	;color:white;" size="small">修改</el-button>
              <el-button  size="small" style="background-color: #009688;color:white;" @click="del(scope.row.id)">删除</el-button>
              <el-button  size="small" style="background-color: #0099FF;;color:white;" @click="xq(scope.$index, scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>

     <el-pagination
  small
  layout="prev, pager, next"
  :total="3"
  page-sizes="[2,4,6,8,10]"
  page-size="1">
</el-pagination>

      </div>
       


        <!-- 新增编辑弹框 -->
    <el-dialog
      :title="addtitle"
      :visible.sync="dialogVisible"
       width="40%"
      :before-close="handleClose"
    >
      <el-form
        :inline="true"
        :model="ruleForm"
        :rules="rules"
        ref="refRuleForm"
        label-width="200px"
        
      >
        <el-form-item label="套餐id" prop="id" v-show="false">
          <el-input v-model="ruleForm.id"></el-input>
        </el-form-item>
        <el-form-item label="套餐编号" prop="combonum">
          <el-input v-model="ruleForm.combonum"></el-input>
        </el-form-item>
        <el-form-item label="套餐图片" prop="comboimg">
          <el-upload class="avatar-uploader" action=""  
              v-model="ruleForm.comboimg" 
              :http-request="uploadURL"                    
              :multiple = true :before-upload="handleBeforeUpload" 
              accept="image/png, image/gif, image/jpg, image/jpeg"
              :limit="8">
                <img v-if="ruleForm.comboimg" :src="ruleForm.comboimg"  class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="套餐名称" prop="comboname">
          <el-input v-model="ruleForm.comboname"></el-input>
        </el-form-item>
         <el-form-item label="套餐价格" prop="comboporct">
          <el-input v-model="ruleForm.comboporct"></el-input>
        </el-form-item>
         <el-form-item label="套餐内容" prop="comboeffect">
          <el-input v-model="ruleForm.comboeffect"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="xuxiao">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleConfirm">确 定</el-button>
      </span>
    </el-dialog>

        <!-- 详情页面弹框 -->
        
    <el-dialog
      :title="addtitle"
      :visible.sync="dialogVisiblee"
      width="40%"
      
    >
      <el-form
        :inline="true"
        :model="ruleForm"
        :rules="rules"
        ref="refRuleFormmd"
        label-width="200px"
        class="demo-ruleForm"
      >
        <el-form-item label="套餐id" prop="roleName" v-show="false">
          <el-input v-model="ruleForm.id"></el-input>
        </el-form-item>
        <el-form-item label="套餐编号" prop="roleName">
          <el-input v-model="ruleForm.combonum"></el-input>
        </el-form-item>
        <el-form-item label="套餐图片" prop="roleDesc">
           <el-upload class="avatar-uploader" action=""  
              v-model="ruleForm.comboimg" 
              :http-request="uploadURL"                    
              :multiple = true :before-upload="handleBeforeUpload" 
              accept="image/png, image/gif, image/jpg, image/jpeg"
              :limit="3">
                <img v-if="ruleForm.comboimg" :src="ruleForm.comboimg"  class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="套餐名称" prop="roleDesc">  
          <el-input v-model="ruleForm.comboname"></el-input>
        </el-form-item>
         <el-form-item label="套餐价格" prop="roleDesc">
          <el-input v-model="ruleForm.comboporct"></el-input>
        </el-form-item>
        <el-form-item label="套餐内容" prop="comboeffect">
          <el-input v-model="ruleForm.comboeffect"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisiblee = false">关闭</el-button>
      </span>
    </el-dialog>
   

    </div>
  </div>
</template>

<script>
import {client,getFileNameUUID} from './alioss'
import axios from "axios"
export default {
  data() {
      return {   
        comboname:"",
        searchInput:"",
         currentPage: 1, //默认进入第几页
        currentIndex: "", //我也不知道
        pagesize: 3, //每页显示条数   
        addtitle: "添加套餐",
        ruleForm: {
          id:"",
          combonum: "",
          comboname: "",
          comboporct:"",
          comboimg:"",
          comboeffect:"",
        },
       allid: "",
         dialogVisible: false,
         dialogVisiblee: false,
        tableData: [
          {id:""}
        ]
      }
    },

    created(){
      this.getlist()
    },
    methods:{

      selevall(){
        this.comboname = this.searchInput,

        this.getlist();//初始化查询
     },

     
      handleBeforeUpload(file) {
				const isJPEG = file.name.split('.')[1] === 'jpeg';
				const isJPG = file.name.split('.')[1] === 'jpg';
				const isPNG = file.name.split('.')[1] === 'png';
				const isWEBP = file.name.split('.')[1] === 'webp';
				const isGIF = file.name.split('.')[1] === 'gif';
				const isLt500K = file.size / 1024 / 1024 / 1024 / 1024 < 4;
				if (!isJPG && !isJPEG && !isPNG && !isWEBP && !isGIF) {
					this.$message.error('上传图片只能是 JPEG/JPG/PNG 格式!');
				}
				if (!isLt500K) {
					this.$message.error('单张图片大小不能超过 4mb!');
				}
				return (isJPEG || isJPG || isPNG || isWEBP || isGIF) && isLt500K;
			},
			uploadURL(file) {
				//注意哦，这里指定文件夹'image/'，尝试过写在配置文件，但是各种不行，写在这里就可以
				var fileName = 'img/'+'banner' + `${Date.parse(new Date())}` + '.jpg'; 
				//定义唯一的文件名，打印出来的uid其实就是时间戳
				client().multipartUpload(fileName, file.file,{
                progress: function(percentage, cpt) {
                  console.log('打印进度',percentage)
                }
              }).then((res)=>{
          //此处赋值，是相当于上传成功之后，手动拼接服务器地址和文件名
                                  //
          this.ruleForm.comboimg ='http://wwssbb.oss-cn-hangzhou.aliyuncs.com/' + fileName;
        })
			},




      getlist() {
            axios({
                url: "/api/combo/getlist",
                method: "GET",
                params:{
                  comboname:this.comboname
                }
            }).then((res) => {
                // console.log(res);
                this.tableData=res.data
            });
        },

      del(id) {
        console.log(id);
            axios({
                url: "/api/combo/delete",
                method: "GET",
                params:{
                  id:id
                }
            }).then((res) => {
               this.$message({
                message: '删除成功',
                type: 'success'
              });
                this.getlist()
            });
        },

      xq(index, row) {
        console.log(index, row.id);
        this.dialogVisiblee = true;   //显示弹框
        this.ruleForm = row;        //row当前行数据，把当前行的数据赋值给 表单
        console.log(this.ruleForm);
        this.allid = row.id;       
      },
      xuxiao(){
       
        this.dialogVisible = false
        this.getlist()
        this.$refs.refRuleForm.resetFields();
      },
      onhandAdd(){
        this.dialogVisible=true
        this.$refs.refRuleForm.resetFields();
      },
       handleClose() {
      this.dialogVisible = false;
    },



      // 编辑
    handleEdit(index, row) {
      console.log(index, row.id);
      this.dialogVisible = true;   //显示弹框
      this.ruleForm = row;        //row当前行数据，把当前行的数据赋值给 表单
      console.log(this.ruleForm);
      this.allid = row.id;         //把id存全局
    },

       // 确定
    dialogVisibleConfirm() {
      // 新增接口
      if (!this.allid) {
         axios({
                url: "/api/combo/add",
                method: "post",
                params:{
                  combonum:this.ruleForm.combonum,
                  comboimg:this.ruleForm.comboimg,
                  comboname:this.ruleForm.comboname,
                  comboporct:this.ruleForm.comboporct,
                  comboeffect:this.ruleForm.comboeffect,
                }
            }).then(res => {
            this.$message.success("添加成功");     //新增成功消息提示
            this.$refs.refRuleForm.resetFields(); //清空表格数据
            this.dialogVisible = false;           //关闭弹框
            this.getlist()                      //刷新列表
          }).catch(res => {
            this.$message.error("添加失败");
          });
      } else {
        // 修改接口
        let id = this.allid
        let params = {
          id:this.ruleForm.id,
          combonum:this.ruleForm.combonum,
          comboimg:this.ruleForm.comboimg,
          comboname:this.ruleForm.comboname,
          comboporct:this.ruleForm.comboporct,
          comboeffect:this.ruleForm.comboeffect,
        }
       axios({
                url: "/api/combo/update",
                method: "post",
                params:{
                  id:this.ruleForm.id,
                  combonum:this.ruleForm.combonum,
                  comboimg:this.ruleForm.comboimg,
                  comboname:this.ruleForm.comboname,
                  comboporct:this.ruleForm.comboporct,
                  comboeffect:this.ruleForm.comboeffect,
                }
            }).then(res => {
            console.log(res,"修改")
            this.$message.success("修改成功");
            this.$refs.refRuleForm.resetFields();
            this.dialogVisible = false;
            this.getlist()
          })
          .catch(res => {
            this.$message.error("修改失败");
          });
      }
    }


    }

};
</script>

<style lang="less" scoped>
 .avatar-uploader .el-upload {
    border: 2px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .el-upload-text{
    border: none;
  }
.mihu{
  margin-left: 100px;
  margin-top: 100px;
}
.divv{
  left: 1000px;
  top: 100px;
  position: absolute;
}
.div {
  width: 100%;
  height: 810px;
  background-color: whitesmoke;
  position: relative;
  
}
.d {
  width: 95%;
  height: 900px;
  background-color: white;
  left: 30px;
  top: 20px;
  position: absolute;
}
.i{
  left: 50px;
  top: 180px;
  position: absolute;
}
</style>